<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>留言</title>
		<!-- 视口 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<!-- 引入的相关文件 -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
	</head>
	<body>
		
		<!-- 栅格系统 -->
		<div class="container-fluid">
			
			<!-- 头部导航栏 -->
			<div class="row navbarr" >
				<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 topnav" >
					<div class="topnavl">
						<a href="#">〈  &nbsp;主页</a>
					</div>
					<div class="topnavr" >
						<a href="#" onclick="esc()" >退出</a>
					</div>
				</div>
			</div>
			
			<div class="row wordcont" >
				<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1 wordcontbg" >
					<div class="word" >
						<p>发表评论</p>
						<form action="${pageContext.request.contextPath }/addWord.action" method="GET"
						onsubmit="return check()">
							<textarea id="wcont" name="wcont" class="form-control wordarr" rows="5" style="resize:none"></textarea>
							<div style="text-align: right;margin-top: 15px;">
								<span class="msg" >${msg}</span>
								<span>当前用户：${USER_SESSION.username }</span>
								<input type="submit" class="btn btn-info" value="发表" />
							</div>
						</form>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1 wordlist">
					<p>热门评论</p>
					<hr color="#04B1CC"/>
					<!-- 媒体元素 -->
					<!-- 第一条 -->
					<c:forEach items="${words}" var="word">
						<div class="media">
							<form>
								<div class="media-left">
						    		<span class="wid">
						    			#<span id="id${word.wid}">${word.wid}</span>
						    		</span>
							 	</div>
								<div class="media-body">
									
									<h4 class="media-heading">${word.username}</h4>
									<span class="time">${word.wtime}</span><br />
									<span>${word.wcont}</span>
								</div>
								<div class="leftzhi" style="text-align: right;" >
									<a onclick="addZan(${word.wid})">支持(<span id="zanNum${word.wid}" >${word.wpraise}</span>)</a>
								</div>
							</form>
							
							
						</div>
					<!-- 分割线 -->
					</c:forEach>
				</div>
			</div>
		</div>
		<script>
			// 判断是登录账号和密码是否为空
			function check(){
			    var wcont = $("#wcont").val();
			    if(wcont==""){
			    	$(".msg").text("不能提交空！");
			        return false;
			    }  
			    return true;
			}
			
			function esc(){
				window.location.href="tologin";
			}
			function addZan(wid){
				var i = 0;
				i = $("#id"+wid).text();
				var a = 0;
				a = $("#zanNum"+wid).html();
				$.get("addZan",{"wid":i},function(data){
					if(data =="OK"){
						a = Number(a)+1;
						$("#zanNum"+wid).html(a);
		               
		            }else{
		                alert("点赞失败！");
		              
		            }
					
				});
			}
		</script>
	</body>
</html>
